<template>
  <tr>
    <td><input type="checkbox" v-model="obj.checked"/> <span></span></td>
    <td>{{ name }}</td>
    <td>{{ price }}</td>
    <td>
      <button @click="reduceFn">-</button>
      {{ num }}
      <button @click="addFn">+</button>
    </td>
    <td>{{ allPrice }}</td>
    <td><button @click="delFn">删除</button></td>
  </tr>
</template>

<script>
// 引入mapMutations函数
import { mapMutations, mapGetters } from "vuex";
export default {
  props: ["name", "price", "num", "index",'obj'],
  methods: {
    // 调用数量加减函数
    ...mapMutations(["reduceNumFn"]),
    ...mapMutations(["addNumFn"]),
    // 调用商品删除函数
    ...mapMutations(["delFun"]),
    // 数量减少
    reduceFn() {
      //   console.log(this.index);
      this.reduceNumFn(this.index);
    },
    // 数量增加
    addFn() {
      this.addNumFn(this.index);
    },
    // 删除商品
    delFn() {
      this.delFun(this.index);
    },
  },
  computed: {
    // ...mapGetters(["allPrice"]),
    // 计算总价
    allPrice() {
      return this.price * this.num;
    },
  },
};
</script>

<style>
</style>